import React from 'react';
import { Card, Button, Row, Col } from 'antd';
import { ArrowRightOutlined } from '@ant-design/icons';

const ProductIntro = () => {
  return (
    <div className="container fadeIn">
      <div style={{ textAlign: 'center', marginBottom: '3rem' }}>
        <h1 style={{ fontSize: '2.5rem', marginBottom: '1rem', color: 'var(--text-color)' }}>
          图灵画匠
        </h1>
        <p style={{ fontSize: '1.2rem', color: 'var(--text-secondary)', maxWidth: '800px', margin: '0 auto' }}>
          智能图像风格转换工具，让您的创意无限绽放
        </p>
      </div>

      <Row gutter={[24, 24]}>
        <Col xs={24} md={12}>
          <Card 
            className="feature-card"
            style={{ 
              background: 'var(--card-bg)',
              borderRadius: 'var(--border-radius)',
              height: '100%'
            }}
          >
            <h2 style={{ color: 'var(--primary-color)', marginBottom: '1rem' }}>智能风格转换</h2>
            <p style={{ color: 'var(--text-secondary)', marginBottom: '1.5rem' }}>
              采用先进的AI技术，将您的图片转换成各种艺术风格。从古典油画到现代插画，一键实现风格转换。
            </p>
            <Button 
              type="primary"
              style={{ 
                background: 'var(--primary-color)',
                borderColor: 'var(--primary-color)'
              }}
            >
              开始使用 <ArrowRightOutlined />
            </Button>
          </Card>
        </Col>

        <Col xs={24} md={12}>
          <Card 
            className="feature-card"
            style={{ 
              background: 'var(--card-bg)',
              borderRadius: 'var(--border-radius)',
              height: '100%'
            }}
          >
            <h2 style={{ color: 'var(--secondary-color)', marginBottom: '1rem' }}>多样化风格库</h2>
            <p style={{ color: 'var(--text-secondary)', marginBottom: '1.5rem' }}>
              提供丰富的预设风格，包括印象派、后现代主义、赛博朋克等多种艺术风格，满足不同创作需求。
            </p>
            <Button 
              type="primary"
              style={{ 
                background: 'var(--secondary-color)',
                borderColor: 'var(--secondary-color)'
              }}
            >
              浏览风格 <ArrowRightOutlined />
            </Button>
          </Card>
        </Col>
      </Row>

      <div style={{ marginTop: '4rem', textAlign: 'center' }}>
        <h2 style={{ color: 'var(--text-color)', marginBottom: '2rem' }}>核心优势</h2>
        <Row gutter={[24, 24]}>
          <Col xs={24} sm={8}>
            <div className="advantage-item">
              <h3 style={{ color: 'var(--primary-color)' }}>高质量输出</h3>
              <p style={{ color: 'var(--text-secondary)' }}>保证转换后的图片质量，细节清晰，色彩还原度高</p>
            </div>
          </Col>
          <Col xs={24} sm={8}>
            <div className="advantage-item">
              <h3 style={{ color: 'var(--primary-color)' }}>快速处理</h3>
              <p style={{ color: 'var(--text-secondary)' }}>采用优化的算法，实现快速高效的风格转换</p>
            </div>
          </Col>
          <Col xs={24} sm={8}>
            <div className="advantage-item">
              <h3 style={{ color: 'var(--primary-color)' }}>简单易用</h3>
              <p style={{ color: 'var(--text-secondary)' }}>直观的用户界面，无需专业知识即可轻松上手</p>
            </div>
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default ProductIntro; 